<template>
  <view style="position: relative;" @touchstart="touchStart" @touchend="touchEnd">
    <view class="cart" :class="{'isCartShow':!isSlide}" v-if="!isSlide" @click="pushCart">
      <image src="../../static/home/cart.png" mode="widthFix"
             style="width: 70%;height: 70%;vertical-align: middle;"></image>
    </view>
    <view class="contentBox">
      <view class="searchBox">
      </view>
      <view class="recommendBox">
        <view class="suggestBox" :class="{'is_fixed':false}">
          <h1 class="title">店铺详情</h1>
          <view class="food-detail">
            <!-- 美食图片 -->
            <image class="food-image" mode="aspectFill"
                   :src="'/api/common/download?name='+shop.pic"></image>
            <!-- 美食介绍 -->
            <view class="food-info">
              <text class="food-name">{{ shop.name }}</text>
              <br>
              <text class="food-price">{{ shop.score }}分</text>
              <text class="food-price">销量{{ shop.sales }}</text>
              <br>
              <text class="food-description">{{ shop.introduce }}</text>
              <br>
            </view>
          </view>
        </view>
        <view class="recommendDetails" :class="{'is_fixedSecond':false}">
          <view v-for="(item,index) in recommendDetailsList" :key="item.id">
            <view class="shopDetails" @click="toDish(item)">
              <view class="left">
                <image :src="'/api/common/download?name='+item.image"></image>
              </view>
              <view class="right">
                <view class="rightTitleBox">
                  <h1>{{ item.name }}</h1>
                  <image src="../../static/home/recommends/ellipsis-v.png" class="ellipsis"></image>
                </view>
                <view class="rightFirstBox">
                  <view class="rightFirstBoxLeft">
                    <text>{{ item.scode }}分</text>
                    <text>月售{{ item.sales }}</text>
                  </view>
                  <view class="rightFirstBoxRight">
                    <text>{{ item.time }}分钟</text>
                    <text>{{ item.distance }}</text>
                  </view>
                </view>
                <view class="rightSecondBox">

                  <text>价格￥{{ item.price }}</text>
                  <view>
                    <text>配送￥0</text>
                    <text class="oldPrice">￥4</text>
                  </view>

                </view>
                <view class="number-selector">
                  <view class="rightThirdBox">
                    <view>
                      <text>已检测体温，请放心食用</text>
                    </view>
                  </view>
                  <view class="selector" @tap.stop.prevent>
                    <uni-number-box v-model="item.number" :min="0" :max="10"
                                    @change="handleChange(item)">
                    </uni-number-box>
                  </view>
                </view>
              </view>
            </view>

          </view>
        </view>
      </view>
    </view>


  </view>
</template>

<script>
import json from '../../static/common/network.json'
import amap from '../../common/amap-wx.130.js'
import {
  getDishApi, getInfoApi
} from "@/network/api";
import Cookies from "js-cookie";
import {   handleChange,getDishNumber ,pushCart} from "@/common/common";

export default {
  data() {
    return {
      shop: {
        name: "美味佳肴",
        price: "50",
        score: 3.5,
        pic: "8b9d8142-1da4-496e-a6b4-bec74b8dbf0a.jpg",
        introduce: "这是一道美味的佳肴，口感鲜美，风味独特。"
      },
      recommendTitles: [],
      recommendDetailsList: [],
      shopInfo: {},
      // 开始与结束标识
      isSlide: false,
    }
  },
  onLoad(e) {
    // 获取json数据

    this.shopInfo = e
  },
  onShow(){
   // this.getData(this.shopId)
    this.getData(this.shopInfo)
  },
  onReady() {
    // 监听筛选组件距离顶部的距离
    const query = uni.createSelectorQuery()
    query.select('.suggestBox').boundingClientRect((res) => {
      // console.log(res.height)
    })
    query.exec((res) => {
      this.menutop = res[0].top;
    })

  },

  methods: {
    pushCart,
    handleChange,
    toDish(dish) {
      console.log(dish)
      uni.navigateTo({
        url: '../dish/dish?dish=' + JSON.stringify(dish) + '&shopId=' + this.shopId
      });
    },
    touchStart() {
      this.isTouch = true
    },
    touchEnd() {
      this.isTouch = false
      this.isSlide = false
    },


    getData(e) {
      // json假数据模拟网络请求
      this.recommendTitles = json.result.data["0"].recommendTitles;
      const _this = this
      getDishApi(e.id).then(res => {
        // _this.recommendDetailsList = res.data;
        //_this.recommendDetailsList.length = 0
        _this.recommendDetailsList = res.data.map(item =>
            ({
              ...item, number: getDishNumber(item.id)
            }))
      }).catch(err => {
        console.log(err)
      })

      getInfoApi(e.id).then(res => {
        Object.assign(_this.shop, res.data)
      }).catch(err => {
        console.log(err)
      })
    }
  },


  computed: {},
  onPageScroll(e) {
    // console.log(e.scrollTop)
    //获取当前高度与顶部的距离
    this.rect = e.scrollTop;
    // console.log('我是rect----------' + this.rect)

    // 75是吸顶盒子的高度
    if (this.rect > (this.menutop - 75)) {
      this.isfixed = true
    } else {
      this.isfixed = false
    }

    //判断滑动是否已经结束
    clearTimeout(time)
    this.isSlide = true
    let time = setTimeout(() => {
      console.log('结束滚动')
      if (!this.isTouch) {
        this.isSlide = false
      }

    }, 100)

  }

}
</script>

<style scoped lang="less">
@import url("../../static/common/uni.less");

@keyframes move {

  /*定义关键帧*/
  0% {
    right: -100rpx;
  }

  100% {
    right: 16rpx;
  }
}

.isCartShow {
  animation-name: move;
  animation-duration: 1s;
}


.cart {
  width: 100rpx;
  height: 100rpx;
  border-radius: 100rpx;
  position: fixed;
  bottom: calc(var(--window-bottom) + 30rpx);
  right: 16rpx;
  background-color: white;
  text-align: center;
  line-height: 100rpx;
  box-shadow: 0px 4px 20px 0px rgba(8, 8, 8, 0.1);
}

.number-selector {
  display: flex;
  align-items: center;
}

.selector {
  padding-left: 50rpx;
}

.food-detail {
  padding: 20px;
}

.food-image {
  width: 100%;
  height: 200px;
  border-radius: 10px;
}


.food-name {
  font-size: 15px;
  font-weight: bold;
}

.food-price {
  margin-right: 20px;
}


.food-description {
  margin-top: 10px;
  font-size: 16px;
  color: #666;
}




// 除微信小程序外执行的代码
/* #ifndef MP-WEIXIN */
.isSearchFixed {
  position: fixed;
  top: 0;
  z-index: 999;

  width: 100%;
  background-color: white;
  padding: 20rpx 0 10rpx 0;
}

.is_fixed {
  position: fixed;
  left: 0;
  top: 100rpx;
  right: 0;
  z-index: 999;
}

.headBox {
  padding-top: 80rpx;
  width: 100%;
  height: 180rpx;
  background-color: @themeColor;
  color: white;

  .locationBox {
    display: flex;
    justify-content: space-between;
    padding: 0 20rpx;
    height: 80rpx;
    line-height: 80rpx;

    .scanCode {
      width: 66rpx;
      height: 66rpx;
    }

    .message {
      width: 60rpx;
      height: 60rpx;
      margin-left: 20rpx;
    }
  }
}

.contentBox {
  background-color: white;
  width: 100%;
  margin-top: -100rpx;
  border-radius: 38rpx;
  padding-top: 20rpx;
  font-size: 24rpx;

  .swiper {
    width: 94%;
    height: 200rpx;
    margin: 20rpx auto;
    margin-bottom: 0;


    .swiper-item {
      width: 100%;

      border-radius: 20rpx;
      overflow: hidden;
    }
  }

  .searchBox {
    display: flex;
    justify-content: space-between;
    width: 94%;
    height: 70rpx;
    line-height: 70rpx;
    background-color: #F2F3F5;
    margin: 0 auto;
    border-radius: 70rpx;


    .left {
      display: flex;
      margin-left: 20rpx;

      input {
        margin-left: 20rpx;
        font-size: 26rpx;
        height: 70rpx;
      }

      .searchIcon {
        width: 38rpx;
        height: 38rpx;
        margin-top: 18rpx;
      }
    }

    .search {
      color: white;
      background-color: @themeColor;
      border-radius: 70rpx;
      width: 120rpx;
      margin: 6rpx;
      line-height: 58rpx;
      text-align: center;
      font-size: 30rpx;
    }
  }

  .navImg {
    display: flex;

    .navImgBox {
      flex: 1;
      text-align: center;
      margin-top: 30rpx;

    }
  }

  .navIcon {
    margin-top: 24rpx;
    display: flex;

    .navIconBox {
      flex: 1;
      text-align: center;
    }
  }

  .recommendBox {
    width: 100%;
    margin-top: 20rpx;
    background-color: white;
    border-radius: 30rpx;

    .suggestBox {
      background-color: white;

      .title {
        padding-top: 20rpx;
        margin-left: 24rpx;
        margin-bottom: 8rpx;
        font-weight: 700;
        font-size: 34rpx;
      }

      .recommendTitles {
        display: flex;
        text-align: center;
        font-size: 24rpx;
        margin-bottom: 10rpx;

        .recommendItem {
          flex: 1;
          border-radius: 16rpx;
          margin: 10rpx 14rpx;
          padding: 14rpx 10rpx;
          background-color: #F3F3F3;
        }

        .suggestChange {
          color: #1997DE;
          background-color: #CCEDFF;
        }
      }
    }


    .shopDetails {
      display: flex;
      box-sizing: content-box;
      padding: 10rpx 20rpx;

      .left {
        margin-right: 20rpx;

        image {
          width: 160rpx;
          height: 160rpx;
        }
      }

      .right {
        width: 76%;

        .rightTitleBox {
          display: flex;
          justify-content: space-between;

          .ellipsis {
            margin-top: 10rpx;
            width: 24rpx;
            height: 24rpx;
          }
        }


        .rightFirstBox {
          display: flex;
          justify-content: space-between;
          font-size: 24rpx;
          margin-top: 8rpx;
          color: #575757;

          .rightFirstBoxLeft {
            text:first-child {
              margin-right: 20rpx;
              color: #E36515;
            }
          }

          .rightFirstBoxRight {
            text:first-child {
              margin-right: 20rpx;
            }
          }
        }

        .rightSecondBox {
          display: flex;
          font-size: 24rpx;
          color: #575757;
          margin-top: 8rpx;

          view {

            text:first-child {
              margin-left: 20rpx;
            }

            .oldPrice {
              color: #B1B1B1;
              font-size: 22rpx;
              text-decoration: line-through;
              margin-left: 4rpx;
            }
          }

        }

        .rightThirdBox {
          margin-top: 6rpx;
          width: 270rpx;
          background-color: #FFEEE2;
          font-size: 22rpx;
          color: #D1651F;
          border-radius: 6rpx;
          text-align: center;
          padding: 4rpx;

        }

        .rightFourth {
          height: 26rpx;
          overflow: hidden;
          padding-bottom: 40rpx;
          border-bottom: 1px solid #F6F6F6;
          display: flex;
          flex-wrap: wrap;

          font-size: 22rpx;
          color: #DE6050;

          .cutBox {
            border-radius: 8rpx;
            padding: 2rpx 6rpx;
            margin-right: 10rpx;
            margin-top: 10rpx;
            border: 1px solid #F7C7C1;
          }
        }

        h1 {
          font-size: 30rpx;
          font-weight: 700;
        }
      }
    }
  }
}

/* #endif */
</style>